<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Mermaid Quick Test Page</title>
    <link rel="icon" type="image/png" href="" />
    <style>
      body {
        font-family: 'trebuchet ms', verdana, arial;
      }
    </style>
  </head>
  <body>
    <pre class="mermaid">
    graph TD
      A[Christmas] -->|Get money| B(Go shopping)
      subgraph 1test["id starting with number"]
      A
      end
      style 1test fill:#F99,stroke-width:2px,stroke:#F0F
    </pre>
    <pre class="mermaid">
    graph TD
      A.a[Christmas]:::someclass -->|Get money| B(Go shopping):::someclass
      subgraph test["id starting with number"]
      A.a
      end
      style test fill:#F99,stroke-width:2px,stroke:#F0F
      classDef someclass fill:#f96;
    </pre>
    <pre class="mermaid">
      graph TD
      9e122290-->82072290_1ec3_e711_8c5a_005056ad0002
      style 9e122290 fill:#F99,stroke-width:2px,stroke:#F0F
    </pre>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      function showFullFirstSquad(elemName) {
        console.log('show ' + elemName);
      }
      mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', logLevel: 1 });
    </script>
  </body>
</html>
